<template>
  <div id="home">
    <div class="top">
      <div class="title">
        快捷入口
        <span class="el-icon-s-tools" />
      </div>
      <el-row :gutter="24" style="margin-bottom:20px">
        <el-col v-for="(item, index) in carList" :key="index" :span="4">
          <el-card shadow="hover">
            <div class="car-item" @click="clickCard(item)">
              <el-image class="car-imgs" :src="item.imgUrl" fit="cover" />
              <span>{{ item.title }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="but">
      <el-row :gutter="24" style="margin-bottom:20px">
        <el-col :span="10">
          <div class="title">
            公告中心
            <span class="el-icon-plus blue" @click="addAnnounShow = true">添加公告</span>
          </div>
          <el-card shadow="hover" class="but-car">
            <el-table
              :data="tableData.data"
              class="but-car-table"
              :header-cell-style="{
                textAlign: 'center',
                background: '#f4f5f6',
                color: '#636465'
              }"
              :row-style="announStyle"
            >
              <el-table-column align="center" label="标题" prop="title" show-overflow-tooltip />
              <el-table-column align="center" label="发送方" prop="publisher" />
              <el-table-column align="center" label="时间" prop="createTime">
                <template slot-scope="scope">
                  <span>
                    {{
                    scope.row.createTime ? scope.row.createTime.substr(0, 10) : ""
                    }}
                  </span>
                </template>
              </el-table-column>>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="primary"
                    style="background:#2669F3"
                    @click="clickAmmon(scope.row)"
                  >查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div class="but-car-page">
              <el-pagination
                :current-page.sync="AnnounData.current"
                :page-size="AnnounData.size"
                layout="prev, pager, next"
                :total="AnnounData.total"
                small
                @size-change="noticeSizeChange"
                @current-change="noticeCurrentChange"
              />
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <div class="title">仪器管理</div>
          <el-card shadow="hover" class="but-car">
            <div class="content">
              <div v-for="(item, index) in apparatusList" :key="index" class="c-item">
                <el-image class="c-img" :src="item.imgUrl" fit="cover " />
                <div class="c-title">
                  <span class="title">{{ item.instrumentName }}</span>
                  <span class="status">状态：{{ item.instrumentStatus.data }}</span>
                </div>
                <el-button size="mini" type="primary" class="c-but" @click="clickEdit(item)">设置</el-button>
              </div>
            </div>
            <el-pagination
              :current-page.sync="appAratusData.current"
              :page-size="appAratusData.size"
              layout="prev, pager, next"
              small
              :total="apparatusTotal"
              @size-change="apparatusSizeChange"
              @current-change="apparatusCurrentChange"
            />
          </el-card>
        </el-col>
        <el-col :span="8">
          <div class="title">数据实时汇总</div>
          <el-card shadow="hover" class="but-car">
            <el-row :gutter="24" class="count-car">
              <el-col v-for="(item, index) in countList" :key="index" :span="8" class="count-item">
                <div class="count-item">
                  <h1>{{ item.sampleCount }}</h1>
                  <span
                    v-if="item.flowStatus.data"
                  >{{ item.flowStatus.data ? item.flowStatus.data :'' }}</span>
                </div>
              </el-col>
            </el-row>
            <!-- <div id="countBut">
              <el-button size="mini" class="el-icon-arrow-left left" @click="clickIcon('left')" />
              <span class="title">
                每{{
                countIndex == 0
                ? "日"
                : countIndex == 1
                ? "周"
                : countIndex == 2
                ? "月"
                : countIndex == 3
                ? "年"
                : ""
                }}汇总
              </span>
              <el-button size="mini" class="el-icon-arrow-right right" @click="clickIcon('right')" />
            </div>-->
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 仪器 -->
    <el-dialog :visible.sync="editShow" width="55%" center custom-class="print-dialog">
      <span
        slot="title"
        class="dialog-title"
        style="font-size: 18px;font-weight: 400;color: #FFFFFF;"
      >新增仪器</span>

      <el-form
        ref="basicForm"
        :rules="basicDataRules"
        :inline="true"
        :model="editData"
        class="demo-form-inline"
        size="small"
        label-width="120px"
      >
        <div style="margin-top:10px;">
          <el-row>
            <el-col :span="24">
              <el-form-item label="名称:" prop="instrumentName">
                <el-input
                  style="width:300px"
                  size="mini"
                  v-model="editData.instrumentName"
                  placeholder="输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="启用日期:" prop="startTime">
                <el-date-picker
                  style="width:300px"
                  size="mini"
                  :format="startTimeFormat"
                  @focus="editData.startTime = ''"
                  v-model="editData.startTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="类型:" prop="instrumentType.key">
                <el-select size="mini" v-model="editData.instrumentType.key" style="width:300px">
                  <el-option
                    v-for="item in dicts.INSTRUMENT_TYPE"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-col :span="8">
                <el-form-item label="所属区县:" prop="areaId.key" width="300px">
                  <el-select
                    size="mini"
                    v-model="editData.areaId.key"
                    placeholder="选择"
                    @change="clickOrgTree"
                  >
                    <el-option
                      v-for="(item, index) in orgTree"
                      :key="index"
                      :label="item.label"
                      :value="item.id"
                      width="300px"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所属医院:" prop="hospitalId.key">
                  <el-select
                    size="mini"
                    v-model="editData.hospitalId.key"
                    placeholder="选择"
                    @change="clickOrgTreeC"
                  >
                    <el-option
                      v-for="(item, index) in orgTreeC"
                      :key="index"
                      :label="item.label"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所属部门:" prop="departId.key">
                  <el-select size="mini" v-model="editData.departId.key" placeholder="选择">
                    <el-option
                      v-for="(item, index) in orgTreeCs"
                      :key="index"
                      :label="item.label"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-form-item label="仪器厂商:" prop="instrumentFirm.key">
                <el-select size="mini" v-model="editData.instrumentFirm.key" style="width:300px">
                  <el-option
                    v-for="item in dicts.INSTRUMENT_FIRM"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="状态:" prop="instrumentStatus.key">
                <el-radio-group v-model="editData.instrumentStatus.key">
                  <el-radio
                    v-for="(item, key, index) in dicts.INSTRUMENT_STATUS"
                    :key="index"
                    :label="key"
                  >{{ item }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="文件(映射)路径:" prop="fileUrl">
                <el-input
                  style="width:300px"
                  size="mini"
                  v-model="editData.fileUrl"
                  placeholder="输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="真实盘符:" prop="realDrive">
                <el-input
                  size="mini"
                  style="width:300px"
                  v-model="editData.realDrive"
                  placeholder="输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-row id="more-row">
                <el-col id="shiyan" :span="24" class="more-col">
                  <el-form-item label="实验项目:" prop="projectIdList" class="projectIdList">
                    <el-checkbox-group v-model="editData.experimentProject">
                      <el-checkbox
                        v-for="(item, key, index) in dicts.EXPERIMENT_CODE"
                        :label="key"
                        name="type"
                      >{{ item }}</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注:" prop="memo">
                <el-input size="mini" v-model="editData.memo" type="textarea" style="width:600px" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button
          size="small"
          type="primary"
          style="padding: 6px 19px;"
          @click="onSubmit('editSseave')"
        >保存</el-button>
      </span>
    </el-dialog>

    <!-- 公告查看 -->
    <el-dialog :visible.sync="announShow" width="85%" center custom-class="print-dialog">
      <span
        slot="title"
        class="dialog-title"
        style="font-size: 18px;font-weight: 400;color: #FFFFFF;"
      >公告内容</span>

      <div class="announ-box">
        <div class="a-title">{{announItem.title}}</div>
        <div class="a-send">发送方：{{announItem.publisher}}</div>
        <div class="a-tinymce">
          <!-- <Tinymce ref="content" v-model="announItem.content" width="100%" /> -->
          <div v-html="announItem.content"></div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button
          size="small"
          type="primary"
          style="padding: 6px 19px;"
          @click="announShow = false"
        >关闭</el-button>
      </span>
    </el-dialog>

    <!-- 发送公告 -->
    <el-dialog :visible.sync="addAnnounShow" width="85%" center custom-class="print-dialog">
      <span
        slot="title"
        class="dialog-title"
        style="font-size: 18px;font-weight: 400;color: #FFFFFF;"
      >发送公告</span>

      <el-form
        ref="basicForm"
        :inline="true"
        :model="addAnnoun"
        class="demo-form-inline"
        size="small"
      >
        <el-col :span="24">
          <el-form-item label="标题:" prop="instrumentName">
            <el-input style="width:300px" size="mini" v-model="addAnnoun.title" placeholder="输入" />
          </el-form-item>
          <Tinymce ref="content" v-model="addAnnoun.content" width="100%" />
        </el-col>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" style="padding: 6px 19px;" @click="clickSendOk">发送</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { initDicts } from "@/utils/commons";
import homeApi from "@/api/home.js";
import orgApi from "@/api/Org.js";
import consumableManageApi from "@/api/ConsumableManage.js";
import Tinymce from "@/components/Tinymce";

export default {
  name: "Dashboard",
  components: { Tinymce },
  data() {
    return {
      // 卡片数据
      carList: [
        {
          id: 1,
          imgUrl: require("@/assets/home/dds.png"),
          title: "待递送",
          url: "/deliveryExp/sampleDelivery"
        },
        {
          id: 2,
          imgUrl: require("@/assets/home/ybdj.png"),
          title: "样本登记",
          url: "/samplingManage/sampleManage"
        },
        {
          id: 3,
          imgUrl: require("@/assets/home/ybcx.png"),
          title: "样本查询",
          url: "/queryManage/sampleQuerys"
        },
        {
          id: 4,
          imgUrl: require("@/assets/home/ybys.png"),
          title: "实验验收",
          url: "/deliveryManage/acceptanceTesting"
        },
        // {
        //   id: 5,
        //   imgUrl: require("@/assets/home/blk.png"),
        //   title: "病历库",
        //   url: "#"
        // },
        {
          id: 6,
          imgUrl: require("@/assets/home/jlsh.png"),
          title: "数据审核",
          url: "/deliveryManage/dataAudit"
        }
      ],
      // 表格数据
      tableData: {
        data: [],
        // 页数
        pageSize: 5,
        // 页码
        pageIndex: 1,
        // 总数
        total: 100
      },
      // 汇总数据
      countList: [],
      //数据实时统计日0，周1，月2，年3
      countIndex: 0,
      // 仪器查询数据
      appAratusData: {
        current: 1,
        map: {},
        model: {
          areaId: {
            key: ""
          },
          departId: {
            key: ""
          },
          experimentKeywords: "",
          hospitalId: {
            key: ""
          },
          instrumentName: "",
          instrumentStatus: {
            data: "",
            key: ""
          }
        },
        order: "descending",
        size: 4,
        sort: "id"
      },
      apparatusTotal: 0,
      // 仪器列表
      apparatusList: [],
      // 仪器修改数据*****
      // 出生日期输入格式
      startTimeFormat: "MMdd",
      // 修改弹窗
      editShow: false,
      // 修改项目
      editData: {
        // 所属区县
        areaId: { key: "" },
        // 所属医院
        hospitalId: { key: "" },
        // 所属部门
        departId: { key: "" },
        centerId: "",
        experimentKeywords: {
          data: "",
          key: ""
        },
        experimentProject: [],
        fileUrl: "",
        instrumentFirm: {
          data: "",
          key: ""
        },
        instrumentName: "",
        instrumentStatus: {
          data: "",
          key: ""
        },
        instrumentType: {
          data: "",
          key: ""
        },
        memo: "",
        otherValue: "",
        realDrive: "",
        startTime: ""
      },
      basicDataRules: {
        instrumentName: [{ required: true, message: "   ", trigger: "change" }],
        startTime: [{ required: true, message: "   ", trigger: "change" }],
        "instrumentType.key": [
          { required: true, message: "  ", trigger: "change" }
        ],
        "instrumentFirm.key": [
          { required: true, message: "   ", trigger: "change" }
        ]
      },
      // 市县
      orgTree: [],
      // 医院
      orgTreeC: [],
      // 部门
      orgTreeCs: [],
      // 字典
      dicts: {
        INSTRUMENT_STATUS: {}, //仪器状态
        INSTRUMENT_TYPE: {}, //仪器类型
        INSTRUMENT_FIRM: {}, //仪器厂家
        EXPERIMENT_CODE: {} //实验项目
      },
      AnnounData: {
        current: 1,
        map: {},
        model: {
          content: "",
          publisher: "",
          title: ""
        },
        order: "descending",
        size: 10,
        sort: "id"
      },
      announShow: false,
      announItem: {},
      addAnnounShow: false,
      addAnnoun: {
        content: "",
        publisher: this.$store.state.account.user.account,
        title: ""
      }
    };
  },
  mounted() {
    initDicts(
      [
        "INSTRUMENT_STATUS",
        "EXPERIMENT_CODE",
        "INSTRUMENT_TYPE",
        "INSTRUMENT_FIRM"
      ],
      this.dicts
    );
    this.initOrgTree();
    this.getApparatus(this.appAratusData);
    this.getSampleStatus();
    this.getAnnouncement(this.AnnounData);
  },
  methods: {
    // 公告样式
    announStyle({ row }) {
      let rowStyle = {};
      if (row.rede == false) {
        rowStyle.background = "#d48e8e";
        rowStyle.color = "#fff";
        return rowStyle;
      }
    },
    // 点击发送确认
    clickSendOk() {
      if (this.addAnnoun.title == "") {
        this.$message.error("请输入标题！");
        return;
      }
      if (this.addAnnoun.content == "") {
        this.$message.error("请输入内容！");
        return;
      }
      homeApi.addAnnouncement(this.addAnnoun).then(res => {
        this.addAnnounShow = false;
        this.getAnnouncement(this.AnnounData);
      });
    },
    // 点击查看公告
    clickAmmon(v) {
      v.rede = true;
      this.tableData.data.forEach((item, index) => {
        if (item.id == v.id) {
          this.$set(this.tableData.data, index, v);
          localStorage.setItem(
            "Announcement",
            JSON.stringify(this.tableData.data)
          );
        }
      });
      this.announItem = v;
      this.announShow = true;
    },
    // 获取公告内容
    getAnnouncement(data) {
      homeApi.announcement(data).then(res => {
        let odData = JSON.parse(localStorage.getItem("Announcement"));
        let newData = res.data.data.records;
        if (odData && odData.length > 0) {
          let odId = [];
          let newId = [];
          odData.forEach(item => {
            odId.push(item.id);
          });
          newData.forEach(item => {
            newId.push(item.id);
          });
          newId.forEach((item, index) => {
            if (newId.indexOf(odId[index]) > -1) {
              newData[index].rede = odData[index].rede;
            } else {
              newData[0].rede = false;
            }
          });
          localStorage.setItem("Announcement", JSON.stringify(newData));
          this.tableData.data = newData;
        } else {
          newData.forEach(item => {
            item.rede = false;
          });
          localStorage.setItem(
            "Announcement",
            JSON.stringify(res.data.data.records)
          );
          this.tableData.data = newData;
        }
        this.AnnounData.size = res.data.data.size;
        this.AnnounData.total = res.data.data.total;
        this.AnnounData.current = res.data.data.current;
      });
    },
    // 获取仪器
    getApparatus(data) {
      homeApi.pageInstrument(data).then(res => {
        this.apparatusList = res.data.data.records;
        this.apparatusTotal = res.data.data.total;
        this.apparatusList.map(item => {
          item.imgUrl = require("@/assets/home/yiqi.png");
        });
      });
    },
    // 仪器修改
    clickEdit(v) {
      this.startTimeFormat = "yyyy-MM-dd";
      this.editData = JSON.parse(JSON.stringify(v));
      this.editShow = true;
      this.orgTree.filter(res => {
        if (res.id == this.editData.areaId.key) {
          this.orgTreeC = res.children;
        }
      });
      this.orgTreeC.filter(res => {
        if (res.id == this.editData.hospitalId.key) {
          this.orgTreeCs = res.children;
        }
      });
    },
    // 基础信息按钮点击事件
    onSubmit(type) {
      if (type == "editSseave") {
        this.$refs["basicForm"].validate(valid => {
          if (valid) {
            // 设置选中值
            consumableManageApi.apparatusManage
              .edit(this.editData)
              .then(res => {
                if (res.status == "200") {
                  this.getApparatus(this.appAratusData);
                  this.editShow = false;
                  this.$message({
                    type: "success",
                    message: "修改成功!"
                  });
                } else {
                  this.$message.error(res.statusText);
                }
              });
          } else {
            return false;
          }
        });
      }
    },
    // 根据选择市县获取医院
    clickOrgTree(v) {
      this.orgTreeC = [];
      this.orgTreeCs = [];
      this.editData.hospitalId = {
        key: ""
      };
      this.editData.departId = {
        key: ""
      };
      this.orgTree.filter(res => {
        if (res.id == v) {
          this.orgTreeC = res.children;
        }
      });
    },
    // 根据选择市县获取医院
    clickOrgTreeC(v) {
      this.orgTreeCs = [];
      this.editData.departId = {
        key: ""
      };
      this.orgTreeC.filter(res => {
        if (res.id == v) {
          this.orgTreeCs = res.children;
        }
      });
    },
    // 获取基础查询
    initOrgTree() {
      orgApi.allTree({}).then(response => {
        const res = response.data;
        this.orgTree = res.data[0].children;
      });
    },
    // 数据汇总
    getSampleStatus() {
      homeApi.summarySampleStatus().then(res => {
        this.countList = res.data.data;
      });
    },
    // 点击选项卡
    clickCard(v) {
      this.$router.push({
        path: v.url
      });
    },
    // 点击公告分页
    noticeSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.AnnounData.size = val;
      this.getAnnouncement(this.AnnounData);
    },
    // 点击公告分页
    noticeCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.AnnounData.current = val;
      this.getAnnouncement(this.AnnounData);
    },
    // 点击仪器分页
    apparatusSizeChange(val) {
      this.appAratusData.size = val;
      this.getApparatus(this.appAratusData);
    },
    // 点击仪器分页
    apparatusCurrentChange(val) {
      this.appAratusData.current = val;
      this.getApparatus(this.appAratusData);
    },
    // 点击事实图标
    clickIcon(type) {
      // 根据点击切换
      if (type == "left") {
        if (this.countIndex == 0) {
          this.countIndex = 3;
        } else {
          this.countIndex = this.countIndex - 1;
        }
      } else {
        if (this.countIndex == 3) {
          this.countIndex = 0;
        } else {
          this.countIndex = this.countIndex + 1;
        }
      }
    }
  }
};
</script>
<style lang="less">
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
.announ-box {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 40vh;
  font-size: 1.5vw;
  color: #000;
  line-height: 1.5;
  .a-send {
    width: 100%;
    justify-content: flex-start;
    font-size: 1.8vh;
  }
  .a-tinymce {
    width: 100%;
    padding-bottom: 4vh;
    margin-top: 1vh;
  }
}
#home {
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #31394d;
  line-height: 14px;
  padding: 20px;
  background-color: #fafbfd;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  .el-button {
    margin-right: 0;
  }
  .count-item {
    height: 38.5% !important;
  }
  .el-table__body tr:hover > td {
    background-color: #b8cae7 !important;
  }
  @media screen and (max-width: 1400px) {
    .el-button--mini {
      padding: 4px 8px;
      font-size: 12px;
      border-radius: 3px;
    }
    .count-item {
      height: 13vh !important;
    }
    overflow: hidden;
  }
  .top {
    flex: 0.3;
  }
  .but {
    flex: 0.7;
  }
  .title {
    span {
      margin-left: 10px;
    }
    .flex;
    height: 35px;
    justify-content: flex-start;
    .blue {
      color: #2669f3;
      cursor: pointer;
    }
  }
  .car-item {
    .car-imgs {
      width: 6rem;
      height: 6rem;
      @media screen and (max-width: 1400px) {
        width: 3rem;
        height: 3rem;
      }
      .img {
        width: 100%;
        height: 100%;
      }
    }
    .flex;
    flex-direction: column;
    span {
      margin-top: 10px;
      @media screen and (max-width: 1400px) {
        font-size: 0.8rem;
      }
    }
  }
  .but-car {
    .el-table::before {
      height: 0;
    }
    .but-car-table {
      width: 100%;
      padding-bottom: 20px;
      height: 34vh;

      .el-table__body-wrapper {
        overflow-y: auto;
        height: 30vh;
      }
      @media screen and (max-width: 1400px) {
        .el-table__body-wrapper {
          overflow-y: auto;
          height: 24vh;
        }
      }
    }
    .el-card__body {
      .content {
        min-height: 34vh;
      }
      .el-pagination {
        float: right;
      }
    }
    .content {
      // margin-bottom: 18px;
      @media screen and (max-width: 1400px) {
        overflow-y: auto;
        height: 30vh;
      }
      .c-item {
        display: flex;
        align-items: center;
        padding: 1vh 0;
        height: 7.8vh;
        @media screen and (max-width: 1400px) {
          height: 7.5vh;
          padding-right: 1.5vh;
        }

        .c-img {
          flex: 0.25;
          width: 100%;
          height: 100%;
        }
        .c-title {
          flex: 0.55;
          height: 100%;
          margin-left: 20px;
          justify-content: center;
          display: flex;
          flex-direction: column;
          min-width: 7vw;
          .title {
            font-size: 0.9vw;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 600;
            color: #31394d;
          }
          .status {
            font-size: 0.2vw;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #31394d;
          }
        }
        .c-but {
          flex: 0.2;
          background: #2669f3;
        }
      }
    }
    .count-car {
      height: 32vh;
      @media screen and (max-width: 1400px) {
        height: 20vh;
      }
      .el-col-8 {
        height: 45%;
        .flex;
      }
      .el-col-8:nth-child(1) {
        border-bottom: 1px solid #dddddd;
        border-right: 1px solid #dddddd;
      }
      .el-col-8:nth-child(2) {
        border-bottom: 1px solid #dddddd;
        border-right: 1px solid #dddddd;
      }
      .el-col-8:nth-child(3) {
        border-bottom: 1px solid #dddddd;
      }
      .el-col-8:nth-child(4) {
        border-right: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
      }
      .el-col-8:nth-child(5) {
        border-right: 1px solid #dddddd;
        border-bottom: 1px solid #dddddd;
      }
      .el-col-8:nth-child(6) {
        border-bottom: 1px solid #dddddd;
      }
      .el-col-8:nth-child(7) {
        border-right: 1px solid #dddddd;
      }
      .el-col-8:nth-child(8) {
        border-right: 1px solid #dddddd;
      }
      .count-item {
        .flex;
        flex-direction: column;
        span {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #748aa1;
          line-height: 8px;
        }
        @media screen and (max-width: 1400px) {
          h1 {
            font-size: 1em;
            margin: 0.67em 0;
          }
        }
      }
    }
    #countBut {
      @media screen and (max-width: 1400px) {
        .el-button--mini {
          padding: 4px 8px;
          font-size: 12px;
          border-radius: 3px;
        }
      }
      .flex;
      cursor: pointer;
      .left {
        .flex;
        width: 45px;
        border: 1px solid #e7e9ea;
        border-radius: 0;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
      }
      .title {
        .flex;
        width: 100px;
        height: 28px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #868e96;
        line-height: 10px;
        border-top: 1px solid #e7e9ea;
        border-bottom: 1px solid #e7e9ea;
        @media screen and (max-width: 1400px) {
          height: 22px;
          font-size: 12px;
        }
      }
      .right {
        .flex;
        width: 45px;
        border: 1px solid #e7e9ea;
        border-radius: 0;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
      }
    }
  }
}
@media screen and (max-width: 1400px) {
  .el-table {
    font-size: 0.7rem;
  }
  .content {
    .c-item {
      .c-title {
        font-size: 0.7rem;
        .status {
          font-size: 0.6rem !important;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: red;
        }
      }
    }
  }
}
</style>
